<template>
	<view class="shopPage">
		<u-navbar title=" " bgColor="transparent" :autoBack="true">
			<view slot="left"><uni-icons type="left" size="16" color="#fff"></uni-icons></view>
			<view slot="center" style="color:#fff">
				<image src="/static/img/pagelogo.png" mode="" class="pagelogo"></image>
			</view>
		</u-navbar>
		<view class="pageTop flex_shu" :style="{background:`url(${imgUrl}with.png) no-repeat`}">
			<view class="shopProfile">
				<image :src="shopInfo.icon" mode="" class="shopProfileImg"></image>
			</view>
			<view class="shopPeople flex_heng">
				<view class="name">
					{{shopInfo.nickName}}
				</view>
				<u-line direction="col" margin="0rpx 12rpx" length="50%"></u-line>
				<view class="jobName">
					{{shopInfo.shopName}}
				</view>
			</view>

			<view class="hengxian"></view>

			<view class="phoneBox flex_heng">
				<view class="phone">
					电话:{{shopInfo.phone?shopInfo.phone:''}}
				</view>
				<view class="address">
					营业时间:{{shopInfo.businessTime?`${shopInfo.businessTime[0]}-${shopInfo.businessTime[1]}`:''}}
				</view>
			</view>
			<!-- <view class="hengxian"></view> -->
			<view class="phoneBox flex_heng">
				<!-- <view class="phone">
					地址:{{shopInfo.address?shopInfo.address:''}}
				</view> -->
				<view class="address">
					索引:{{shopInfo.boothDadName?shopInfo.boothDadName:''}}{{shopInfo.boothName?shopInfo.boothName:''}}
				</view>
			</view>
		</view>

		<view class="shopCon">
			<view class="" style="margin: 28rpx;">
				<u-search placeholder="搜索商品/规格/库存" v-model="keyword" :showAction="false" bgColor="#EAEAEA"></u-search>
			</view>

			<view class="" style="margin-left: 28rpx;">
				<u-scroll-list :indicator="false">
					<view class="couponItem" v-for="(item,index) in couponList" :key="index">
						<view class="couponItemCon">
							<image :src="imgUrl + 'couponBg1.png'" mode=""></image>
							<view class="itemAmount">
								￥{{item.discountAmount}}
							</view>
							<view class="itemName">
								{{item.name}}
							</view>
							<view class="itemType">
								满{{item.conditionAmount}}减{{item.discountAmount}}
							</view>
							<view :class="item.isReceive?'itemState':'itemStateTwo'" @tap="getledCoupon(item)">
								{{item.isReceive?'已领取':'领取'}}
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>

			<scroll-view class="shopUl" scroll-y="true" lower-threshold="50" @scrolltolower="shopLower">
				<view class="shopBox flex_heng">
					<view class="shopCard flex_shu" v-for="(item,index) in shopList" :key="index" @tap="goodsClick(item)">
						<image :src="item.pic" mode="" class="shopImg"></image>
						<view class="shopName u-line-2">
							{{item.title}}
						</view>
						<view class="shophengxian"></view>
						<view class="shopBtm flex_heng">
							<view class="shopPrice">
								￥{{item.price}}
							</view>
							<view class="shopStock">
								库存{{item.totalStock}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	import {
		getShopInfo,
		getProductList,
		getCouponList,
		ledCoupon
	} from '@/api/api.js';
	export default {
		components: {
			// navber
		},
		data() {
			return {
				imgUrl: this.$imgUrl,
				shopInfo: {},
				shopId: null,
				shopList: [],
				couponList: []
			};
		},
		computed: {
			...mapState(['hasLogin', 'safeAreaBottom'])
		},
		onLoad(option) {
			console.log('option', option);
			this.shopId = option.shopId;
			this.getShopInfoData(option.shopId);
			this.getCouponListData()
		},

		onShow() {},
		methods: {
			// 领取优惠券
			getledCoupon(item) {
				if (item.isReceive) {
					uni.showToast({
						title: '已经领取过了',
						icon: 'none',
					});
					return
				} else {
					ledCoupon(item.id).then(res => {
						if (res.code == 200) {
							console.log(res);
							uni.showToast({
								title: '领取成功',
								icon: 'none',
							});
							this.couponList = [];
							this.getCouponList();
						}
					})
				}
			},
			// 获取优惠券列表
			getCouponListData() {
				getCouponList({
					pageNum: 1,
					pageSize: 999,
					status: 2,
					shopId: this.shopId
				}).then(res => {
					if (res.code == 200) {
						console.log(res);
						if (res.rows.length > 0) {
							this.couponList = [...this.couponList, ...res.rows]
						}
					}
				})
			},
			getShopInfoData(shopId) {
				uni.showLoading()
				getShopInfo(shopId).then(res => {
					this.shopInfo = res.data;
					this.shopInfo.businessTime = this.shopInfo.businessTime.split(',')
					uni.hideLoading();
					this.getProductListData();
				}).finally(() => {
					uni.hideLoading()
				})
			},

			getProductListData() {
				uni.showLoading()
				const params = {
					shopId: this.shopId
				}
				getProductList({
					params
				}).then(res => {
					console.log('res', res);
					this.shopList = res.rows;
					uni.hideLoading();
				}).finally(() => {
					uni.hideLoading()
				})
			},

			goodsClick(item) {
				uni.navigateTo({
					url: `/package/pages/goodsDetail/goodsDetail?goodsId=${item.id}`
				})
			},
			shopLower(e) {

			}
		},
	};
</script>
<style>
	page {
		width: 100vw;
		height: 100vh;
		background: #F5F5F5;
	}
</style>

<style lang="scss">
	.shopPage {
		width: 100vw;

		.pagelogo {
			width: 304rpx;
			height: 56rpx;
		}

		.pageTop {
			width: 100vw;
			height: 478rpx;
			background-size: 100% 100% !important;
			padding-top: 160rpx;
			padding-bottom: 28rpx;
			box-sizing: border-box;

			.shopProfile {
				width: 120rpx;
				height: 120rpx;
				opacity: 1;

				.shopProfileImg {
					width: 100%;
					height: 100%;
				}
			}


			.shopPeople {
				width: 100%;
				height: 50rpx;
				opacity: 1;
				color: #ffffff;
				font-size: 36rpx;
				font-weight: 500;
				font-family: "Alibaba PuHuiTi 2.0";
				letter-spacing: 0.54rpx;
				justify-content: center;

				.name {
					// padding: 0 12rpx;
				}

				.jobName {
					// padding: 0 12rpx;
					font-size: 32rpx;
				}
			}

			.hengxian {
				width: 638rpx;
				height: 1rpx;
				opacity: 1;
				background: linear-gradient(90deg, #e2e2e205 0%, #ffffff 50%, #e2e2e205 100%);
			}

			.phoneBox {
				width: 100%;
				height: 50rpx;
				font-size: 28rpx;
				font-weight: 400;
				font-family: "Alibaba PuHuiTi 2.0";
				letter-spacing: 0.42rpx;
				justify-content: center;
				color: #ffffff;

				.phone {
					margin-right: 6rpx;
				}

				.address {
					margin-left: 6rpx;
				}
			}
		}

		.shopCon {
			width: 100vw;
			background: #f6f6f6;
			height: calc(100vh - 478rpx);
			overflow: hidden;

			.couponItem {
				width: 638rpx;
				height: 106rpx;
				margin-right: 36rpx;

				.couponItemCon {
					width: 638rpx;
					height: 106rpx;
					position: relative;

					image {
						width: 638rpx;
						height: 100%;
						position: absolute;
						top: 0;
						lefr: 0;
					}

					.itemAmount {
						position: absolute;
						top: 50%;
						left: 18rpx;
						transform: translateY(-50%);
						color: #ff2424;
						font-size: 32rpx;
						font-weight: 500;
						font-family: "Alibaba PuHuiTi 2.0";
					}

					.itemName {
						position: absolute;
						top: 16rpx;
						left: 162rpx;
						color: #ff0000;
						font-size: 28rpx;
						font-weight: 500;
						font-family: "Alibaba PuHuiTi 2.0";
					}

					.itemType {
						position: absolute;
						top: 60rpx;
						left: 162rpx;
						color: #787878;
						text-align: left;
						font-size: 22rpx;
						font-weight: 300;
						font-family: "Alibaba PuHuiTi 2.0";
					}

					.itemState {
						position: absolute;
						top: 50%;
						right: 28rpx;
						transform: translateY(-50%);
						width: 114rpx;
						height: 46rpx;
						line-height: 46rpx;
						border-radius: 326rpx;
						opacity: 1;
						background: #666666;
						color: #ffffff;
						text-align: center;
						font-size: 24rpx;
						font-weight: 500;
						font-family: "Alibaba PuHuiTi 2.0";
					}

					.itemStateTwo {
						position: absolute;
						top: 50%;
						right: 28rpx;
						transform: translateY(-50%);
						width: 114rpx;
						height: 46rpx;
						line-height: 46rpx;
						border-radius: 326rpx;
						opacity: 1;
						background: #ff2424;
						color: #fff;
						text-align: center;
						font-size: 24rpx;
						font-weight: 500;
						font-family: "Alibaba PuHuiTi 2.0";
					}
				}

			}

			.shopUl {
				width: 100%;
				height: calc(100vh - 760rpx);

				.shopBox {
					width: 100%;
					padding: 28rpx 28rpx 0 28rpx;
					box-sizing: border-box;
					flex-wrap: wrap;


					.shopCard {
						width: 332rpx;
						height: 496rpx;
						margin-bottom: 20rpx;

						.shopImg {
							width: 322rpx;
							height: 334rpx;
							border-radius: 8rpx 8rpx 0 0;
						}

						.shopName {
							width: 100%;
							color: #000000;
							font-size: 28rpx;
							font-weight: 500;
							font-family: "Alibaba PuHuiTi 2.0";
							letter-spacing: 0.42rpx;
						}

						.shophengxian {
							width: 308rpx;
							height: 1rpx;
							opacity: 1;
							background: linear-gradient(90deg, #FFFFFF05 0%, #b3b3b34f 50%, #FFFFFF05 100%);
						}

						.shopBtm {
							width: 100%;
							height: 56rpx;

							.shopPrcie {
								color: #000000;
								font-size: 36rpx;
								font-weight: 700;
								font-family: "Alibaba PuHuiTi 2.0";
								letter-spacing: 0.54rpx;
							}

							.shopStock {
								color: #333333;
								font-size: 24rpx;
								font-weight: 400;
								font-family: "Alibaba PuHuiTi 2.0";
								letter-spacing: 0.36rpx;
							}
						}
					}
				}

			}
		}

	}
</style>